// 基于准备好的dom，初始化echarts实例
//var myChart = echarts.init(document.getElementById('main'));
var myChart = echarts.init(document.getElementById('echart4'));
option = {
    backgroundColor: {
        type: 'radial',
        x: 0.5,
        y: 0.4,
        r: 0.3,
        colorStops: [{
            offset: 0,
            color: '#010B7A'
        }, {
            offset: .5,
            color: '#593640'
        }, {
            offset: 1,
            color: '#010B7A'
        }],
        globalCoord: false
    },
    tooltip: {
        trigger: 'item',
    },
    legend: {
        //stype: 'scroll',
        show: true,
        top: 10,
        left: 'center',
        itemWidth: 14,
        itemHeight: 10,
        itemGap: 20,
        width: 600,
        data: ['<5000', '5000-9000', '9000-13000', '13000-17000', '17000-21000', '21000-25000', '>25000'],
        textStyle: {
            color: '#fff',
            fontSize: 12,
        },
    },
    textStyle: {
        color: '#fff',
    },
    visualMap: {
		show: true,
        min: 0,
        max: 100,
        calculable: true,
        // itemWidth: 14,
        // itemHeight: 165,
        align: 'left',
        color: ['#3f4199', '#5d54b5', '#a0589e', '#e76281', '#fe846d', '#feda5b'],
        right: 30,
        top: '10%',
        textStyle: {
            color: '#fff',
            fontSize: 14,
        }
    },
    radar: {
        center: ['50%', '50%'],
        radius: 100,
        startAngle: 90,
        nameGap: 16,
        splitNumber: 4,
        shape: 'polygon',
        axisLine: {
            show: true,
            lineStyle: {
                // color: '#564d8e',
                width: 1,
            },
        },
        splitLine: {
            show: true,
            lineStyle: {
                // color: '#4b476f',
                //width: 1,
            },
        },
        splitArea: {
            show: true,
            areaStyle: {
                color: 'rgba(0, 0, 0,0)'
            },
        },
        indicator: [{
                text: '学校',
                max: 100
            },
            {
                text: '医疗',
                max: 100
            },
            {
                text: '公共交通',
                max: 100
            },
            {
                text: '房屋设施',
                max: 100
            },
            {
                text: '休闲娱乐',
                max: 100
            },
             
        ]
    },
    series: {
        name: '',
        type: 'radar',
        symbol: 'none',
        areaStyle: {
            emphasis: {
                opacity: 0.3,
            },
        },
        lineStyle: {
            normal: {
                width: 0.8,
            },
        },
        data: [{
                name: '<5000',
                value: [90, 100, 57.5, 25.8, 73.5]
            },
            {
                name: '5000-9000',
                value: [65.1, 81.1, 50.7, 31.2, 69.2]
            },
            {
                name: '9000-13000',
                value: [74.4, 57.9, 39.45, 39.9, 63.1]
            },
            {
                name: '13000-17000',
                value: [100, 78.1, 37.85, 54.8, 56.1]
            },
            {
                name: '17000-21000',
                value: [68.7, 64, 85.2, 70, 69.7]
            },
            {
                name: '21000-25000',
                value: [79.9, 43.4, 9.1, 68.9, 54.6]
            },
            {
                name: '>25000',
                value: [45.9, 63.1, 82, 100, 48.3]
            },
            
        ]
    }
};
myChart.hideLoading();
myChart.setOption(option);
height= $('#echart4').height();
myChart.getDom().style.height = this.height+ "px";
myChart.resize();
 window.addEventListener("resize",function(){
     myChart.resize();
 });